{`${data.label} Activity Progress

[V0_FILE]typescriptreact:file="components/kokonutui/apple-activity-card.tsx" "use client"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; interface ActivityData { label: string; value: number; color: string; size: number; current: number; target: number; unit: string; } interface CircleProgressProps { data: ActivityData; index: number; } const activities: ActivityData[] = [ { label: "MOVE", value: 85, color: "#FF2D55", size: 200, current: 479, target: 800, unit: "CAL", }, { label: "EXERCISE", value: 60, color: "#A3F900", size: 160, current: 24, target: 30, unit: "MIN", }, { label: "STAND", value: 30, color: "#04C7DD", size: 120, current: 6, target: 12, unit: "HR", }, ]; const CircleProgress = ({ data, index }: CircleProgressProps) => { const strokeWidth = 16; const radius = (data.size - strokeWidth) / 2; const circumference = radius * 2 * Math.PI; const progress = ((100 - data.value) / 100) * circumference; const gradientId = `gradient-${data.label.toLowerCase()}`; const gradientUrl = `url(#${gradientId})`; return (

); }; const DetailedActivityInfo = () => { return ( {activities.map((activity) => ( {activity.label} {activity.current}/{activity.target} {activity.unit} ))} ); }; export default function AppleActivityCard({ title = "Activity Rings", className, }: { title?: string; className?: string; }) { return (

{title}

{activities.map((activity, index) => ( ))}

); }

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This